<template>
  <!--模板 -->
  <el-container direction="vertical">
    <el-header height="100px">
      <!-- Header content -->
      {{ state.title }}
    </el-header>
    <el-container direction="horizontal">
      <el-aside width="200px">
        <!-- Aside content -->
        <el-button @click="methods.setTitle()">测试</el-button>
      </el-aside>
      <el-container direction="vertical">
        <el-main height="">
          <!-- Main content -->
          {{ state.title }}
        </el-main>
        <el-footer height="100px">
          <!-- Footer content -->
        </el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>
<script lang="tsx" setup>
//逻辑
//import { reactive } from 'vue';
//const state=reactive({
//data: {

//}})
import useSysStore from "@/stores/index";

const sysStore = useSysStore();
const state = reactive({
  title: "标题",
});

const methods = {
  setTitle() {
    state.title = sysStore.title;
  },
};
</script>
<style lang="scss" scoped>
//样式
.el-container {
  height: 100vh;
}
.el-header {
  background-color: blue;
}
.el-aside {
  background-color: cyan;
}
.el-footer {
  background-color: aquamarine;
}
</style>
